<script lang="ts" setup>
import { ref } from 'vue';

import { TabPane, Tabs } from 'ant-design-vue';

import Downstream from './downstream/downstream.vue';
import CloudLog from './log/cloudLog.vue';
import DeviceLog from './log/deviceLog.vue';
import Upstream from './upstream/upstream.vue';

const activeKey = ref('1');
const activeKeyList = ref('1');
</script>
<template>
  <div class="simula">
    <div class="operation">
      <Tabs type="card" v-model:active-key="activeKey">
        <TabPane key="1" tab="上行调试" force-render><Upstream /></TabPane>
        <TabPane key="2" tab="下行调试" force-render>
          <Downstream />
        </TabPane>
      </Tabs>
    </div>
    <div class="list">
      <Tabs
        type="card"
        v-model:active-key="activeKeyList"
        :tab-bar-style="{ paddingLeft: '22px' }"
      >
        <TabPane key="1" tab="设备日志"><DeviceLog /></TabPane>
        <TabPane key="2" tab="云端日志"><CloudLog /></TabPane>
      </Tabs>
    </div>
  </div>
</template>
<style scoped lang="scss">
.simula {
  display: flex;
  column-gap: 10px;
  justify-content: space-between;
  width: 100%;

  .operation {
    width: 30%;
  }

  .list {
    width: 70%;
  }
}
</style>
